<template>
  <div class="Echarts">
    <div id="main1" style="padding: 20px;width: 95%;height: 400px;background-color: white;margin-top: 20px"></div>
    <el-divider></el-divider>
    <div id="main2" style="padding: 20px;width: 95%;height: 400px;background-color: white;"></div>
    <el-divider></el-divider>
    <div id="main3" style="padding: 20px;width: 95%;height: 400px;background-color: white;"></div>
    <el-divider></el-divider>
    <div id="main4" style="padding: 20px;width: 95%;height: 400px;background-color: white;"></div>
    <el-divider></el-divider>
    <div id="main5" style="padding: 20px;width: 95%;height: 400px;background-color: white;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {getStatisticData} from "@/api/data";

export default {
  name: "Statistics",
  data() {
    return {
      colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'],
      //配置图表myChart1，需要传入的数据是course表每个课程的名称course_name以及对应的student_course里选课人数count（sid）
      option1: {
        title: {
          text: '学生选课人数统计',
        },
        tooltip: {},
        legend: {
          data: ['学生选课人数']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '学生选课人数',
          type: 'bar',
          data: [],
          itemStyle: {  //设置折线图中的颜色
            color: params => this.$data.colors[params.dataIndex] || '#fac858'
          }
        }]
      },
      //配置图表myChart2，需要传入的数据是student_course表里学生总成绩total_score
      option2: {
        title: {
          text: '学生成绩区间统计',
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      },
      //配置图表myChart3，需要传入的数据是student_practice表每个创新实践类型practice_type对应的名称以及其id的个数
      option3: {
        title: {
          text: '学生创新实践统计',
        },
        tooltip: {},
        series: [
          {
            type: 'pie',
            data: [
              {
                value: null,
                name: '社会实践'
              },
              {
                value: null,
                name: '学科竞赛'
              },
              {
                value: null,
                name: '科技成果'
              },
              {
                value: null,
                name: '培训讲座'
              },
              {
                value: null,
                name: '创新项目'
              },
              {
                value: null,
                name: '校外实习'
              },
            ]
          }
        ]
      },
      //配置图表myChart4，需要传入的数据是student_daily_activity表每个日常活动类型daily_activity_type对应的名称以及其id的个数
      option4: {
        title: {
          text: '学生日常活动统计',
        },
        tooltip: {},
        series: [
          {
            type: 'pie',
            data: [
              {
                value: null,
                name: '体育活动'
              },
              {
                value: null,
                name: '外出旅游'
              },
              {
                value: null,
                name: '文艺演出'
              },
              {
                value: null,
                name: '聚会'
              },
            ]
          }
        ]
      },
      //配置图表myChart5，需要传入的数据是student_honor表每个日常活动类型honor_type对应的名称以及其id的个数
      option5: {
        title: {
          text: '学生荣誉信息统计',
        },
        // label: {
        //   show: true
        // },
        tooltip: {},
        series: [
          {
            type: 'pie',
            data: [
              {
                value: null,
                name: '院级'
              },
              {
                value: null,
                name: '校级'
              },
              {
                value: null,
                name: '省级'
              },
              {
                value: null,
                name: '国家级'
              },
            ]
          }
        ]
      }
    }
  },
  methods: {
    getData(myChart1, myChart2, myChart3, myChart4, myChart5) {
      //从后端获取数据，之后加载到data对应的数据项
      getStatisticData(this.$data.option1).then(res => {
        console.log(res);
        // console.log(res.data["学生选课数据"]);

        //更新学生选课表
        for (let key in res.data["学生选课数据"]) {
          if (key == "total") continue;
          this.$data.option1.xAxis.data.push(key);  //键
          this.$data.option1.series[0].data.push(res.data["学生选课数据"][key]);  //值
        }
        //设置标题
        this.$data.option1.title.text = this.$data.option1.title.text+ "  (总共"+ res.data["学生选课数据"]["total"] +"条数据)";
        myChart1.setOption(this.$data.option1);

      })
      getStatisticData(this.$data.option2).then(res => {
        console.log(res.data["学生绩点分布"]);
        this.$data.option2.xAxis.data.push('0.0~1.0');  //键
        this.$data.option2.series[0].data.push(res.data["学生绩点分布"]['0.0~1.0']);
        this.$data.option2.xAxis.data.push('1.0~2.0');  //键
        this.$data.option2.series[0].data.push(res.data["学生绩点分布"]['1.0~2.0']);
        this.$data.option2.xAxis.data.push('2.0~3.0');  //键
        this.$data.option2.series[0].data.push(res.data["学生绩点分布"]['2.0~3.0']);
        this.$data.option2.xAxis.data.push('3.0~4.0');  //键
        this.$data.option2.series[0].data.push(res.data["学生绩点分布"]['3.0~4.0']);
        this.$data.option2.xAxis.data.push('4.0~5.0');  //键
        this.$data.option2.series[0].data.push(res.data["学生绩点分布"]['4.0~5.0']);

        //设置标题
        this.$data.option2.title.text = this.$data.option2.title.text+ "  (总共"+ res.data["学生绩点分布"]["total"] +"条数据)";
        myChart2.setOption(this.$data.option2);

      })
      getStatisticData(this.$data.option3).then(res => {

        //更新社会实践相关数据
        for (let i = 0; i < 6; i++) {
          this.$data.option3.series[0].data[i].value = res.data["社会实践数据"][i + 1];  //值
        }
        //设置标题
        this.$data.option3.title.text = this.$data.option3.title.text+ "  (总共"+ res.data["社会实践数据"]["total"] +"条数据)";
        myChart3.setOption(this.$data.option3);
      })
      getStatisticData(this.$data.option4).then(res => {

        //更新学生日常活动相关数据
        for (let i = 0; i < 4; i++) {
          this.$data.option4.series[0].data[i].value = res.data["学生日常数据"][i + 1];  //值
        }
        //设置标题
        this.$data.option4.title.text = this.$data.option4.title.text+ "  (总共"+ res.data["学生日常数据"]["total"] +"条数据)";
        myChart4.setOption(this.$data.option4);
      })
      getStatisticData(this.$data.option5).then(res => {

        //更新学生日常活动相关数据
        for (let i = 0; i < 4; i++) {
          this.$data.option5.series[0].data[i].value = res.data["学生荣誉数据"][i + 1];  //值
        }
        //设置标题
        this.$data.option5.title.text = this.$data.option5.title.text+ "  (总共"+ res.data["学生荣誉数据"]["total"] +"条数据)";
        myChart5.setOption(this.$data.option5);
      })
    },
    myEcharts() {
      let myChart1 = echarts.init(document.getElementById('main1'));
      let myChart2 = echarts.init(document.getElementById('main2'));
      let myChart3 = echarts.init(document.getElementById('main3'));
      let myChart4 = echarts.init(document.getElementById('main4'));
      let myChart5 = echarts.init(document.getElementById('main5'));

      myChart1.setOption(this.$data.option1);
      myChart2.setOption(this.$data.option2);
      myChart3.setOption(this.$data.option3);
      myChart4.setOption(this.$data.option4);
      myChart5.setOption(this.$data.option5);

      this.getData(myChart1, myChart2, myChart3, myChart4, myChart5);
    }
  },
  mounted() {
    this.myEcharts();
  }
}
</script>

<style scoped>

</style>
